<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
            <el-breadcrumb-item>汽车品牌</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="query" clearable>
                        <el-button slot="append" @click="serch" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addBrand">添加品牌</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="id"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="品牌名称"
                >
                </el-table-column>

                <el-table-column
                        prop="factoryStatus"
                        label="是否为品牌制造商"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.factoryStatus==0" >是</el-tag>
                        <el-tag type="danger" v-else>否</el-tag>
                        <el-switch
                                v-model="scope.row.factoryStatus"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="0"
                                :inactive-value="1"
                                @change="changeFactory(scope.row.id,scope.row.factoryStatus)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="shopStatus"
                        label="销售状态"
                        align="center"
                        >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.shopStatus==0">在售</el-tag>
                        <el-tag type="danger" v-else>停售</el-tag>
                        <el-switch
                                v-model="scope.row.shopStatus"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="0"
                                :inactive-value="1"
                                @change="changeShop(scope.row.id,scope.row.shopStatus)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="log"
                        label="品牌log"
                        align="center"
                >
                    <template slot-scope="scope">
                        <img :src="scope.row.log" width="80" height="50px" />
                    </template>
                </el-table-column>
                <el-table-column
                        prop="introduce"
                        label="介绍"
                        show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="EditBrand(scope.row.id)"  size="medium" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete"  size="medium" @click="delBrand(scope.row.id)" circle></el-button>
                        <el-button type="success" icon="el-icon-picture" size="medium" @click="uploadImage(scope.row.id)"  circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

            <!--修改弹框的 表单 -->
            <el-dialog
                    title="修改信息"
                    :visible.sync="EditDialogVisible"
                    @close="closeAll"
                    width="50%"
            >
                <el-form :model="EditFormData" status-icon :rules="EditFormBrands" ref="EditRuleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="品牌名称" prop="name">
                        <el-input type="text" v-model="EditFormData.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌介绍" prop="introduce">
                        <el-input type="textarea"  v-model="EditFormData.introduce" autocomplete="off"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="品牌标志" prop="log">
                        <img :src="EditFormData.log" width="80" height="50px" />
                        <el-input type="text"  v-model="EditFormData.log" autocomplete="off"></el-input>
                    </el-form-item>-->
                    <el-form-item label="是否为品牌制造商" prop="factoryStatus">
                        <template>
                            <el-radio v-model="EditFormData.factoryStatus" :label="0">是</el-radio>
                            <el-radio v-model="EditFormData.factoryStatus" :label="1">否</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="销售状态" prop="shopStatus">
                        <template>
                            <el-radio v-model="EditFormData.shopStatus" :label="0">在售</el-radio>
                            <el-radio v-model="EditFormData.shopStatus" :label="1">停售</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="EditDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmEditBrand">确 定</el-button>
                    </el-form-item>
                </el-form>
                <!--<span slot="footer" class="dialog-footer">
                  <el-button @click="EditDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="confirmEditBrand">确 定</el-button>
                </span>-->
            </el-dialog>


            <!--添加弹框的 表单 -->
            <el-dialog
                    title="添加信息"
                    :visible.sync="AddDialogVisible"
                    @close="closeAll"
                    width="50%"
            >
                <el-form :model="AddFormData" status-icon :rules="AddFormBrands" ref="EditRuleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="品牌名称" prop="name">
                        <el-input type="text" v-model="AddFormData.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌介绍" prop="introduce">
                        <el-input type="textarea" v-model="AddFormData.introduce" autocomplete="off"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="品牌标志" prop="log">
                        <el-input type="text"  v-model="AddFormData.log" autocomplete="off"></el-input>

                    </el-form-item>-->
                    <el-form-item label="是否为品牌制造商" prop="factoryStatus">
                        <template>
                            <el-radio v-model="AddFormData.factoryStatus" :label="0">是</el-radio>
                            <el-radio v-model="AddFormData.factoryStatus" :label="1">否</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="销售状态" prop="shopStatus">
                        <template>
                            <el-radio v-model="AddFormData.shopStatus" :label="0">在售</el-radio>
                            <el-radio v-model="AddFormData.shopStatus" :label="1">停售</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="AddDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAddBrand">确 定</el-button>
                    </el-form-item>
                </el-form>
                <!--<span slot="footer" class="dialog-footer">
                  <el-button @click="AddDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="confirmAddBrand">确 定</el-button>
                </span>-->
            </el-dialog>

            <!-- 上传图片的弹框 -->
            <el-dialog
                    title="图片上传"
                    :visible.sync="uploadImageDialogVisible"
                    width="30%"
                    @close="closeImage"
            >

                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:60/sys/upload/uploadFile"
                        :headers="importHeaders"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100" height="100">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="uploadImageDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateUserAvatarByUserId">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>
    </div>
</template>

<script>
    var mytoken = sessionStorage.getItem("token");
    export default {
        name: "brand",
        data(){
            return{


                //查询条件
                query:"",
                //当前页码
                currentPage: 1,
                //每页显示记录
                pageSize:5,
                //总条数
                total:0,
                //当前的记录数据
                tableData: [],
                //是否打开修改弹框 true 打开 false 关闭
                EditDialogVisible: false,
                //修改弹框表单的数据
                EditFormData:{},
                //修改弹框 表单的 规则
                EditFormBrands:{
                    name:[
                        {required:true,message:"名称不能为空",trigger:"blur"}
                    ],
                    log:[

                    ],
                    introduce:[
                        {required:true,message:"介绍不能为空",trigger:"blur"},
                        {min:0,max:255,message: "介绍的长度必须为0~255",trigger: "blur"}
                    ]
                },
                //是否打开 添加弹框
                AddDialogVisible: false,
                //添加表单的数据
                AddFormData:{},
                //添加表单的规则
                AddFormBrands:{
                    name:[
                        {required:true,message:"名称不能为空",trigger:"blur"}
                    ],
                    log:[

                    ],
                    introduce:[
                        {required:true,message:"介绍不能为空",trigger:"blur"},
                        {min:0,max:255,message: "介绍的长度必须为0~255",trigger: "blur"}
                    ]
                },


                //是否打开弹框
                uploadImageDialogVisible: false,
                importHeaders: {token: mytoken},
                imageUrl: '',
                brandId:'',
            }
        },
        //页面加载自动执行
        created() {
            this.initBrandTable(this.currentPage,this.pageSize);
        },
        methods: {

            //修改每页几条的方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.initBrandTable(this.currentPage, this.pageSize);
            },
            //修改页数的方法
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initBrandTable(this.currentPage, this.pageSize);
            },
            //模糊查询按钮的方法
            serch() {
                this.currentPage = 1;
                this.pageSize = 5;
                this.initBrandTable(this.currentPage, this.pageSize);
            },
            //初始化表格的方法
            initBrandTable(currentPage, pageSize) {
                var that = this;
                this.$http.post(`/hire/brand/findBrandByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.tableData = res.data.data.records;
                        that.total = res.data.data.total;
                    } else {
                        that.$message.error("用户信息加载失败");
                    }
                })
            },
            //修改弹框回显的方法
            EditBrand(id) {
                this.EditDialogVisible = true;
                //console.log(userId);
                var that = this;
                this.$http.get(`/hire/brand/getBrandById/${id}`).then(function (res) {
                    that.EditFormData = res.data.data;
                })
            },

            closeAll(){
              this.$refs.EditRuleForm.resetFields();
            },
            closeImage(){
                this.imageUrl='';
            },
            //提交修改弹框的方法
            confirmEditBrand() {
                var that = this;
                this.$refs['EditRuleForm'].validate((valid) => {
                    if (valid) {
                        that.$http.put("/hire/brand/updateBrand", this.EditFormData).then(function (res) {
                            if (res.data.code == 200) {
                                that.$message.success("修改成功");
                                that.EditDialogVisible = false;
                                that.initBrandTable(that.currentPage, that.pageSize);
                            } else {
                                that.$message.error(res.data.msg);
                            }
                        })
                    }
                })
            },
            //修改生产状态的方法
            changeFactory(id, factoryStatus) {
                var that = this;
                this.$http.put(`/hire/brand/updateFactoryByBrandId/${id}/${factoryStatus}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message.success(res.data.msg);
                        that.initBrandTable(that.currentPage, that.pageSize);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
            },
            //修改销售状态的方法
            changeShop(id, shopStatus) {
                //this.$message.success(`${shopStatus}`);
                var that = this;
                this.$http.put(`/hire/brand/updateShopByBrandId/${id}/${shopStatus}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message.success(res.data.msg);
                        that.initBrandTable(that.currentPage, that.pageSize);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
            },
            //添加按钮的弹框的方法
            addBrand() {
                this.AddDialogVisible = true;
            },
            //提交添加表单的方法
            confirmAddBrand() {
                //console.log(this.AddFormData);
                var that = this;
                this.$refs['EditRuleForm'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/hire/brand/addBrand", this.AddFormData).then(function (res) {
                            if (res.data.code == 200) {
                                //console.log(res);
                                that.$message.success(res.data.msg);
                                that.AddDialogVisible = false;
                                that.initBrandTable(that.currentPage, that.pageSize);
                            } else {
                                that.$message.error(res.data.msg);
                            }
                        })
                    }
                })
            },
            //删除品牌
            delBrand(id){
                var that=this;

                this.$confirm('是否删除该品牌?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get(`/hire/brand/delById/${id}`).then(function(resp){
                        if (resp.data.code == 200) {
                            //console.log(res);
                            if (that.total%that.pageSize==1){
                                that.currentPage--;
                            }else {
                                that.currentPage = that.currentPage;
                            }
                            that.$message.success(resp.data.msg);
                            that.initBrandTable(that.currentPage, that.pageSize);
                        } else {
                            that.$message.error(resp.data.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

            //点击头像的弹框
            uploadImage(id){
                this.brandId = `${id}`;
                this.uploadImageDialogVisible=true;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl=res.data;
            },
            //提交修改头像的弹框
            updateUserAvatarByUserId(){
                var that = this;
                var imgUrl=this.imageUrl;
                this.$http.post(`/hire/brand/updateBrandLogoByBrandId/${this.brandId}/?log=${this.imageUrl}`).then(function (res){
                    if (res.data.code==200){
                        that.$message.success(res.data.msg);
                        that.uploadImageDialogVisible = false;
                        that.initBrandTable(that.currentPage, that.pageSize);
                    }else {
                        that.$message.error(res.data.msg);
                    }
                })
            },
        }
    }
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>